<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>TestD1</title>
    <script>
      
      function Update() {
        var url = "http://127.0.0.1:5011/update";
        var httpRequest = new XMLHttpRequest();
        httpRequest.open('POST', url, true);
        httpRequest.setRequestHeader("Content-type", "application/json");
        var obj = {
        
        };
        
        httpRequest.send(JSON.stringify(obj));
        
        // 响应后的回调函数
        httpRequest.onreadystatechange = function() {
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            var json = JSON.parse(httpRequest.responseText);
            map = json['map'];
            last_loss_t = json['last_loss_t'];
            t = json['t'];
            dIndexVector = json['dIndexVector'];
            // console.log(json);
            Draw();
            setTimeout("Update()", 10);
          }
        };
        

      }
      let map = {{ map }};
      let last_loss_t = 0;
      let t = 0;
      let dIndexVector = [];
      const colorConfig = {
        0: 'black',
        1: 'gold',
        2: 'red',
        3: 'green'
      }

      function Draw() {
        var tableStr = '<h3>最后失败T=' + last_loss_t + '; 当前T=' + t + '</h3><table border="1">';
        for (y = 0; y < map.length; y++) {
          var rowStr = '<tr>';
          for (x = 0; x < map[0].length; x++) {
            var color = colorConfig[map[y][x]];
            rowStr += '<td style="background-color: ' + color + '"></td>';
          }
          rowStr += '</tr>\n';
          // console.log(rowStr);
          tableStr += rowStr;
        }
        tableStr += '</table><h3>感知通道数=' + (dIndexVector.length - 1) + '</h3>'
        document.body.innerHTML = tableStr;
        // console.log(tableStr);
      }
    </script>
    <style>
      td {
        // height: 40px;
        background-color: aliceblue;
      }

      table {
        width: 200px;
        height: 200px;
        margin: auto;
      }
    </style>
  </head>

  <body style="background-color: black;text-align: center;" onload="Update()">
    
  </body>
</html>
